<template>
  <Navigator />

  <el-scrollbar :height=scrollHeight>
    <Meteor />
    <RouterView v-slot="{ Component }">
      <Transition name="fade" mode="out-in">
        <component :is="Component" :key="$route.path" />
      </Transition>
    </RouterView>
  </el-scrollbar>

  <!-- 登录遮罩层 -->
  <!-- 后期可以考虑将遮罩层写成一个组件，提升复用性 -->
  <Transition name="fade">
    <div class="maskLayer" v-if="loginStore.loginDisplay" @click.self="handleMaskClick">
      <Login @click.stop />
    </div>
  </Transition>

</template>

<script setup lang="ts" name="App">

import { RouterView } from 'vue-router';
import { useWindowSize } from 'vue-window-size';
import { computed } from 'vue';
import Navigator from '@/components/navigator/Navigator.vue';
import Meteor from '@/components/common/Meteor.vue';
import Login from '@/components/common/Login.vue';
import { useLoginStore } from '@/store/loginStore';

// 登录遮罩显影控制
const loginStore = useLoginStore()
const windowSize = useWindowSize()

// 控制登录遮罩层
const handleMaskClick = () => {
  loginStore.loginDisplay = false
}

/**
 * 控制滚轮视窗
 */
const scrollHeight = computed(() => {
  return windowSize.height.value - 72
})

</script>

<style scoped>
/* 路由切换动画 */
.fade-leave-active,
.fade-enter-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 全局遮罩 */
.maskLayer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(101, 101, 101, 0.6);
  /* opacity: 0; */
  transition: all 0.5s;
}
</style>
